<template>
    <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700">
        <div class="drawer_box">
            <div class="drawer_t">
                <div class="drawer_t_l">
                    <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/quanyishaixuan.png"
                        alt="">
                    添加采购公司权限设置
                </div>
                <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
                    @click="drawer = false">
            </div>
            <div class="drawer_c">
                <div class="drawer_c_title">
                    <img src="/static/skin/herodoo/main/platform/home/img/shaixuannr.png" alt=""
                        class="drawer_c_title_img">
                    已选内容
                </div>
                <div class="exhibition">
                    <div class="exhibition_content">
                        <div class="exhibition_content_list" v-for="(item) in typeArr" :key="item"
                            @click="deleteExhibition(item, 1)">
                            <div class="content_list_name">{{ item }}</div>
                            <img class="content_list_img" src="/static/skin/herodoo/main/platform/home/img/shanchud.png"
                                alt="">
                        </div>
                        <div class="exhibition_content_list" v-for="(item) in scaleArr" :key="item"
                            @click="deleteExhibition(item, 2)">
                            <div class="content_list_name">{{ item }}</div>
                            <img class="content_list_img" src="/static/skin/herodoo/main/platform/home/img/shanchud.png"
                                alt="">
                        </div>
                        <div class="exhibition_content_list" v-for="(item) in fundArr" :key="item"
                            @click="deleteExhibition(item, 3)">
                            <div class="content_list_name">{{ item }}</div>
                            <img class="content_list_img" src="/static/skin/herodoo/main/platform/home/img/shanchud.png"
                                alt="">
                        </div>
                        <div class="exhibition_content_list" v-for="(item) in industryArr" :key="item.ID"
                            @click="deleteExhibition(item, 4)">
                            <div class="content_list_name">{{ item.label }}</div>
                            <img class="content_list_img" src="/static/skin/herodoo/main/platform/home/img/shanchud.png"
                                alt="">
                        </div>
                    </div>
                    <div class="clear" @click="clear">一键清空</div>
                </div>
                <div class="list_box">
                    <div class="left">仅指定企业可见:</div>
                    <div class="right">
                        <el-select v-model="typeSelect.value" multiple collapse-tags placeholder="请选择可见企业">
                            <el-option v-for="item in typeSelect.options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="content_list">
                    <div class="nav_box">
                        <div class="nav_title">公司类型:</div>
                        <div class="nav_content">
                            <el-checkbox-group v-model="typeArr">
                                <el-checkbox v-for="(item, index) in typeClass" :key="index" :label="item.Name"
                                    :checked="item.checked"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="nav_box">
                        <div class="nav_title">公司规模:</div>
                        <div class="nav_content">
                            <el-checkbox-group v-model="scaleArr" @change="scaleLadderChange">
                                <el-checkbox v-for="(item, index) in scaleClass" :key="index" :label="item.Name"
                                    :checked="item.checked"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="nav_box">
                        <div class="nav_title">注册资金:</div>
                        <div class="nav_content">
                            <el-checkbox-group v-model="fundArr" @change="fundLadderChange">
                                <el-checkbox v-for="(item) in fundClass" :key="item.ID" :label="item.Name"
                                    :checked="item.checked"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="nav_box">
                        <div class="nav_title">公司行业:</div>
                        <div class="nav_content">
                            <el-tree ref="tree" :data="industryData" :props="defaultProps" node-key="ID" show-checkbox
                                default-expand-all @check="handleCheck" empty-text
                                :default-checked-keys="treeArrChecked"></el-tree>
                        </div>
                    </div>
                </div>
            </div>
            <div class="drawer_b">
                <span class="drawer_sx" @click="addToFather()">
                    确认
                </span>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: 'screenRights',
    data() {
        return {
            octopus: this.$parent.octopus,
            typeSelect: {
                options: [{
                    value: '1',
                    label: '上海建工'
                }, {
                    value: '2',
                    label: '上海城投'
                }, {
                    value: '3',
                    label: '上海地产集团'
                }, {
                    value: '4',
                    label: '金地集团'
                }, {
                    value: '5',
                    label: '航瀚资本'
                }],
                value: ''
            },
            // 公司类型
            typeClass: [],
            typeArr: [],
            // 公司规模
            scaleClass: [],
            scaleArr: [],
            // 注册资金
            fundClass: [],
            fundArr: [],
            // 公司行业
            industryData: [],
            industryArr: [],
            minIndustryArr: [],
            treeArrChecked: [],
            // 总数组
            checkList: [],
            drawer: false,
        };
    },
    watch: {
        minIndustryArr: {
            handler(newItems, oldItems) {
                this.checkList = [...this.typeArr, ...this.scaleArr, ...this.fundArr, ...this.minIndustryArr];
            },
            deep: true
        },
        typeArr: {
            handler(newItems, oldItems) {
                this.checkList = [...this.typeArr, ...this.scaleArr, ...this.fundArr, ...this.minIndustryArr];
            },
            deep: true
        },
        scaleArr: {
            handler(newItems, oldItems) {
                this.checkList = [...this.typeArr, ...this.scaleArr, ...this.fundArr, ...this.minIndustryArr];
            },
            deep: true
        },
        fundArr: {
            handler(newItems, oldItems) {
                this.checkList = [...this.typeArr, ...this.scaleArr, ...this.fundArr, ...this.minIndustryArr];
            },
            deep: true
        }
    },
    mounted() {

    },
    created() {
        this.init()
    },
    methods: {

        init() {
            let o = this
            // 公司类型
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 820,
                    cellData: [
                        { name: "ID" },	// ID
                        { name: "Name" },	// Name
                    ],
                },
                function (data) {
                    if (data.status.code == 200) {
                        o.typeClass = data.content.queryData
                    } else {
                        o.octopus.tips.error(data);
                    }
                });
            // 公司规模
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 822,
                    cellData: [
                        { name: "ID" },	// ID
                        { name: "Name" },	// Name
                    ],
                },
                function (data) {
                    if (data.status.code == 200) {
                        o.scaleClass = data.content.queryData
                    } else {
                        o.octopus.tips.error(data);
                    }
                });
            // 公司行业
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 797,
                    cellData: [
                        { name: "ID" },	// ID
                        { name: "Name" },	// Name
                        { name: "ParentkeyValue" },	// 父ID
                    ],
                    pageData: {
                        rowSize: 777
                    },
                },
                function (data) {
                    if (data.status.code == 200) {
                        let prentArr = []
                        data.content.queryData.forEach(element => {
                            element.label = element.Name
                            delete element.Name
                            if (element.ParentkeyValue == null) {
                                prentArr.push(element)
                            }
                        });
                        prentArr.forEach(res => {
                            res.children = []
                        })
                        data.content.queryData.forEach(res => {
                            prentArr.forEach(re => {
                                if (res.ParentkeyValue && res.ParentkeyValue == re.ID) {
                                    re.children.push(res)
                                }
                            })
                        })
                        o.industryData = prentArr
                    } else {
                        o.octopus.tips.error(data);
                    }
                });



            // 注册资金
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 793,
                    cellData: [
                        { name: "ID" },	// ID
                        { name: "Name" },	// Name
                    ],
                    pageData: {
                        rowSize: 777
                    },
                },
                function (data) {
                    if (data.status.code == 200) {
                        o.fundClass = data.content.queryData
                    } else {
                        o.octopus.tips.error(data);
                    }
                });
        },
        clear() {
            this.typeArr = []
            this.scaleArr = []
            this.fundArr = []
            this.minIndustryArr = []
            this.industryArr = []
            this.$refs.tree.setCheckedKeys([]);
        },
        //删除所选权益
        deleteExhibition(item, ind) {
            if (ind == 1) {
                this.typeArr = this.typeArr.filter(items => items != item)
            } else if (ind == 2) {
                this.scaleArr = this.scaleArr.filter(items => items != item)
            } else if (ind == 3) {
                this.fundArr = this.fundArr.filter(items => items != item)
            } else if (ind == 4) {
                this.$refs.tree.setChecked(item, false);
                this.industryArr = this.industryArr.filter(items => items != item)
                this.minIndustryArr = this.minIndustryArr.filter(items => items != item.label)
            }
        },
        handleClose(done) {
            this.drawer = false
        },
        drawerOp(list) {
            this.drawer = true;
            if (!list || list.length == 0) {
                return
            }
            let arr = list.split(',')
            let arr2 = [...this.typeClass, ...this.scaleClass, ...this.fundClass]
            arr2.map(v => {
                if (arr.filter(x => x == v.ID).length > 0) {
                    v.checked = true;
                }
            })
            let arrId = []
            this.industryData.map(v => {
                arr.map(x => {
                    if (x == v.ID) {
                        arrId.push(v.ID)
                    }
                })
                v.children.map(x => {
                    if (arr.find(j => j == x.ID)) {
                        arrId.push(x.ID)
                    }
                })
                this.treeArrChecked = arrId;
            })
        },
        handleCheck(node, checkedNodes) {
            this.industryArr = []
            this.minIndustryArr = []
            checkedNodes.checkedNodes.forEach(ele => {
                if (ele.ID != 1) {
                    this.industryArr.push(ele)
                    this.minIndustryArr.push(ele.label)
                }
            });
        },
        addToFather() {
            // 公司类型
            let typeArr = this.typeClass
                .filter(ele => this.typeArr.includes(ele.Name))
                .map(ele => ele.ID);
            // 公司规模
            let scaleArr = this.scaleClass
                .filter(ele => this.scaleArr.includes(ele.Name))
                .map(ele => ele.ID);
            // 注册资金
            let fundArr = this.fundClass
                .filter(ele => this.fundArr.includes(ele.Name))
                .map(ele => ele.ID);
            //公司行业
            let industryArr = []
            this.industryData.forEach(res => {
                if (res.children.length) {
                    res.children.forEach(ress => {
                        this.industryArr.forEach(ind => {
                            if (ress.label == ind.label) {
                                industryArr.push(ress.ID)
                            }
                        })
                    })
                } else {
                    this.industryArr.forEach(ind => {
                        if (res.label == ind.label) {
                            industryArr.push(res.ID)
                        }
                    })
                }
            })
            this.$emit('compnyList', this.checkList, typeArr, scaleArr, fundArr, industryArr);
            this.drawer = false
        },
        scaleLadderChange() {
            if (this.scaleArr.length > 1) {
                this.scaleArr.shift();
            }
        },
        fundLadderChange() {
            if (this.fundArr.length > 1) {
                this.fundArr.shift();
            }
        }
    },
};
</script>
<style scoped>
.list_box {
    margin: 2rem 0;
}

>>>.el-input {
    height: 100%;
}

.left {
    margin-bottom: 1rem;
    font-size: 1.6rem;
}

.exhibition_content div {
    display: flex;
    align-items: center;
    background-color: #FBF8F9;
    height: 3rem;
    padding: 0 .4rem;
    margin: .4rem;
    color: #898582;
    font-size: 1.2rem;
    border-radius: 1rem;
}

.content_list_img {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.el-checkbox {
    margin-top: 3rem;
    width: 25%;
    padding-left: 1rem;
    margin-right: 0;
}

.navsIndex {
    z-index: 10 !important;
}

.drawer_box {
    padding: 3rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.drawer_t {
    display: flex;
    justify-content: space-between;
}

.drawer_t_l {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
}

.drawer_t_l_img {
    width: 1.4vw;
    margin-right: 1vh;
}

.drawer_t_r {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.drawer_c {
    /* flex: 1; */
    border-radius: 1rem;
    margin: 3rem 0 5rem 0;
    padding: 2rem;
    background-color: #FDFDFD;
    box-shadow: inset 0px 0px 4px 0px #E9E9E9;
    background: #FDFDFD;
}

.drawer_c_title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.8rem;
}

.drawer_c_title_img {
    width: 3rem;
    height: 3rem;
}

.content_list {
    height: 48vh;
    overflow: auto;
}

.nav_content {
    padding-bottom: 2.5rem;
    width: 80%;
    border: 1px solid #dfdfdf;
    z-index: 5;
    border-radius: 0 1rem 1rem 1rem;
    margin-bottom: 2rem;
}

.nav_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.nav_title {
    font-size: 1.6rem;
    margin-bottom: .5rem;
}

.exhibition {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    position: relative;
}

.clear {
    text-decoration: underline;
    position: absolute;
    font-size: 1.2rem;
    color: #898582;
    cursor: pointer;
    bottom: .5rem;
    right: 1rem;
}

.exhibition_title {
    font-size: 1.6rem;
}

.exhibition_content {
    display: flex;
    flex-wrap: wrap;
    max-height: 10rem;
    height: 10rem;
    overflow: auto;
    background-color: #fff;
    border: 1px solid #EBEBEB;
    width: 100%;
    border-radius: 1rem;
    padding: .2rem;
}

.drawer_b {
    height: 4rem;
    position: absolute;
    bottom: 1rem;
    right: 2rem;
}

.drawer_sx {
    padding: 1rem 4rem;
    background-color: #F78C51;
    color: #fff;
    font-size: 1.6rem;
    border-radius: 1rem;
    cursor: pointer;
}

>>>.el-checkbox__label {
    font-size: 1.5rem;
}

>>>.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #F78C51;
    border-color: #F78C51;
}

>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #F78C51;
    border-color: #F78C51;
}

>>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #F78C51;
}

>>>.el-tree-node__label {
    font-size: 1.5rem;
}

>>>.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #F78C51;
}

>>>.el-checkbox__inner:hover {
    border-color: #F78C51;
}

>>>.el-checkbox {
    width: 29%;
}
</style>